
<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/extend/jquery-ui-1.9.2.custom.css?v={{ layui.setter.version }}" media="all"/>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/extend/jquery.autocompleter.css?v={{ layui.setter.version }}" media="all"/>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/declare.css?v={{ layui.setter.version }}" media="all"/>
</script>

<div class="child-box">
    <div class="layui-card layadmin-header">
        <div class="layui-breadcrumb" lay-filter="breadcrumb">
            <a href="javascript:" lay-href=""><i class="iconfont iconhome"></i>首页</a>
            <a><cite>外汇管理</cite></a>
            <a><cite>结汇支付</cite></a>

            <div class="layui-card-header-left" title="刷新" zmark-event="layui.manage.render">
                <i class="layui-icon layui-icon-refresh layui-anim" zmark-anim="layui-anim-rotate"></i>
            </div>
        </div>
    </div>

    <div class="wrap">
        <div class="top">
            <div class="top-left">
                <div class="layui-card mt20">
                    <form class="layui-form" method="post" lay-filter="form-txn-info" id="form-txn-info"  method="post" onsubmit="return false">
                        <div class="layui-card-header">
                            <span class="def-fc left-split">交易详情</span>
                        </div>
                        <div class="layui-card-body">
                            <div class="layui-row">
                                <div class="layui-col-md8 pr10">
                                    <label class="layui-form-label"><span class="text-danger">*</span>卖出币种</label>
                                    <div class="layui-input-block required-box">
                                        <select name="sellCur" id="sellCur" lay-verify="required" lay-filter="sellCur"
                                                class="required">
                                            <option value="">请选择卖出币种</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
    
                            <div class="layui-row">
                                <div class="layui-col-md8 pr10">
                                    <label class="layui-form-label"><span class="text-danger">*</span>买入币种</label>
                                    <div class="layui-input-block required-box">
                                        <select name="buyCur" id="buyCur" lay-verify="required" lay-filter="sellCur"
                                                class="required">
                                            <option value="CNY" selected>人民币</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
    
                            <div  class="layui-row">
                                <div class="layui-col-md8 pr10">
                                    <label class="layui-form-label"><span class="text-danger">*</span>交易模式</label>
                                    <div class="layui-input-block required-box">
                                        <input type="radio" name="txnMode" value="0" title="以买入币种为准" >
                                        <input type="radio" name="txnMode" value="1" title="以卖出币种为准" checked>
                                    </div>
                                </div>
                            </div>
    
                            <div class="layui-row">
                                <div class="layui-col-md8 pr10">
                                    <label class="layui-form-label"><span class="text-danger">*</span>交易金额</label>
                                    <div class="layui-input-block required-box">
                                        <input name="txnAmt" class="layui-input required" lay-verify="required" NUMBER="2" placeholder="请输入交易金额"/>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-row">
                                <div class="layui-col-md8 pr10">
                                    <label class="layui-form-label"><span class="text-danger">*</span>汇款附言</label>
                                    <div class="layui-input-block">
                                        <input name="paymentDetails" class="layui-textarea required" lay-verify="required" placeholder="请输入付款详情"/>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-row pt20 pb20">
                                <div class="layui-col-md8 pr10 normal" style="margin-left: 110px;width: 748px;">
                                    <button lay-submit lay-filter="queryPrice-submit" class="layui-btn queryPrice-btn" id="queryPriceBtn"><i class="iconfont iconicon-1"></i>获取汇率</button>
                                </div>
                            </div>
    
                        </div>    
                    </form>
                </div>
            </div>
            <div class="top-right">
                <div class="layui-card mt20">
                    <div class="layui-card-header">
                        <span class="def-fc left-split">交易概况</span>
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <ul class="layui-timeline">
                                <li class="layui-timeline-item">
                                  <i class="layui-icon layui-timeline-axis"></i>
                                  <div class="layui-timeline-content layui-text">
                                    <p class="layui-timeline-title">您卖出</p>
                                    <p id="settlement-sell">
                                    -
                                    </p>
                                  </div>
                                </li>
                                <li class="layui-timeline-item">
                                  <i class="layui-icon layui-timeline-axis"></i>
                                  <div class="layui-timeline-content layui-text">
                                    <p class="layui-timeline-title">汇率</p>
                                    <p id="settlement-exchangeRate">-</p>
                                    <ul class="zm-hide settlement-rate">
                                      <li id="settlement-realExchangeRate"></li>
                                      <li>汇率有效期为15秒</li>
                                    </ul>
                                  </div>
                                </li>
                                <li class="layui-timeline-item">
                                  <i class="layui-icon layui-timeline-axis"></i>
                                  <div class="layui-timeline-content layui-text">
                                    <p class="layui-timeline-title">您买入</p>
                                    <p id="settlement-buy">
                                    -
                                    </p>
                                  </div>
                                </li>
                                <li class="layui-timeline-item">
                                  <i class="layui-icon layui-timeline-axis"></i>
                                  <div class="layui-timeline-content layui-text">
                                    <p class="layui-timeline-title">手续费</p>
                                    <p  id="settlement-fee">
                                    -
                                    </p>
                                  </div>
                                </li>
                            </ul>
                        </div>

                        <div class="layui-row settlement-warn zm-hide">
                           <span><i class="iconfont iconjinggao"></i>请在倒计时结束前，点击下方的 <span style="font-size: 14px;color:#0ba9f9">确认汇率</span> 按钮进行锁汇，锁定汇率即确认交易，无法撤销及修改</span>
                        </div>

                        <div class="layui-row pt20 pb20 settlement-confirm zm-hide">
                            <div class="layui-col-md8 pr10 normal" style="margin-left: 110px;width: 748px;">
                                <button class="layui-btn lockRate-btn" id="confirmRateBtn"><i class="iconfont iconicon-1"></i>确认汇率</button>
                            </div>
                        </div>

                    </div>
                </div>    
            </div>
        </div>

        <div class="bottom">
            <div class="layui-card mt20">
                <div class="layui-card-header">
                    <span class="def-fc left-split">处理中的交易</span>
                </div>
                <div class="layui-card-body table-box">
                    <form class="layui-form" method="post" id="form-txn-list" onsubmit="return false" lay-filter="form-txn-list">
                        <div class="layui-row mt10">
                            <table class="zm-tab txn-tab" id="tab-txn-list">
                                <colgroup>
                                    <col width="140">
                                    <col width="150">
                                    <col width="150">
                                    <col width="160">
                                    <col width="80">
                                    <col width="100">
                                    <col width="100">
                                    <col width="120">
                                    <col width="120">
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>交易编号</th>
                                    <th>买入</th>
                                    <th>卖出</th>
                                    <th>付款金额</th>
                                    <th>汇率</th>
                                    <th>状态</th>
                                    <th>订单状态</th>
                                    <th>提交日期</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                            </table>
                            <div class="blank-list">
                                <i class="iconfont iconwushuju"></i>
                                <dd>无交易数据</dd>
                            </div>
                            <div class="zm-pagination">
                                <div id="txn-list-pagination"></div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
    </div>
   
</div>

<script type="text/html" id="tpl-txn-list">
    {{# layui.each(d,function(i,o){ }}
    <tbody>
    <tr class="tr-tb">
        <td>
            <span class="mr30"><a href="javascript:" onclick="layui.rateSettlement.show('{{o.id}}','{{o.txnType}}')" title="{{o.txnNo}}" class="copy">{{o.txnNo}}</a></span>
        </td>
        <td>
            <div class="layui-row">
                {{layui.com.removeNull(o.buyAmt)}}  {{layui.com.removeNull(o.buyCurDesc)}}
            </div>
        </td>
        <td>
            <div class="layui-row">{{layui.com.removeNull(o.sellAmt)}}  {{layui.com.removeNull(o.sellCurDesc)}}</div>
        </td>
        <td>
            <div class="layui-row">{{layui.com.removeNull(o.sellAmt)}}  {{layui.com.removeNull(o.sellCurDesc)}}</div>
        </td>
        <td>
            <div class="layui-row">{{layui.com.removeNull(o.queryRate)}}</div>
        </td>
        <td>
            {{# if(o.status == '02'){ }}
            <div class="layui-row sent">{{layui.com.removeNull(o.statusDesc)}}</div>
            {{# } }}
            {{# if(o.status == '09'){ }}
            <div class="layui-row complete">{{layui.com.removeNull(o.statusDesc)}}</div>
            {{# } }}
        </td>
        <td>
            {{# if(o.orderStatus == '01'){ }}
            <div class="layui-row">
                <div status-id="{{o.id}}">

                </div>
            </div>
            {{# }else{ }}
              <div class="layui-row sent">
                  <a href="javascript:" class="def-a fr" onclick="layui.rateSettlement.declare('{{o.txnNo}}')"><i class="iconfont icontianjia"></i>未添加</a>
              </div>
            {{# } }}
        </td>
        <td>
            <div class="layui-row">{{layui.com.removeNull(o.dateCreated)}}</div>
        </td>
        <td>
            
        </td>
    </tr>
    </tbody>
    {{# }); }}
</script>

<script type="text/html" id="tpl-order">
    <div class="layui-row tooltip">
        <a href="javascript:"><span class="complete">{{d.orderStatusDesc}}</span></a>
        <div class="tip-box">
            <div class="tip-con" style="width: 240px">
                <p>编号：{{layui.com.removeNull(d.declareOrderId)}}</p>
                <p>收支交易类别：{{layui.com.removeNull(d.transCodeDesc)}}</p>
                <p>状态：{{layui.com.removeNull(d.orderStatusDesc)}}</p>
                <p>提交日期：{{layui.com.removeNull(d.orderDate)}}</p>
                <p>关联交易：{{layui.com.removeNull(d.txnNo)}}</p>
            </div>
            <div class="z-arrow z-arrow-left"></div>
        </div>
    </div>
</script>

<script>
    layui.use('rateSettlement', layui.factory('rateSettlement'));
</script>
<style type="text/css">
    .wrap {
        position: absolute;
        height: 100%;
        width: 100%;
        padding: 10px 0px;
    }

    .top {
        display: flex;
    }

    .top-left {
        width: 60%;
        float: left;
        background-color: white;
    }

    .top-right {
        position: relative;
        float: right;
        width: calc(40% - 10px);
        margin-left: 10px;
        background-color: white;
    }
    .buttom {

    }
    .pr10 {
        padding-right: 10px;
        padding-bottom: 28px;
    }
    .layui-text {
       font-size: 12px;
       color: #333;
    }
</style>